<!-- 登录页-->
<template>
	<view class="loginpic">
		<!-- <div class="bgp" >
			<image  style="width: 100%;-webkit-touch-callout: none;-webkit-user-select: none;" src="../../static/DMS_dl_img.png" mode="widthFix"></image>
		</div> -->
		<div class="login" style="bottom: 0upx;">
			<div class="loginImage">
				<image src="../../static/DMS_dl_logo.png" style="width: 180upx;height: 180upx;" mode="scaleToFill"></image>
			</div>
			<div class="inputView">
				<image src="../../static/dl_yhm_icon.png" style="width: 48upx;height: 48upx;margin-left: 38upx;" mode=""></image>
				<input class="loginInput" type="text" style="height: 96upx;"  v-model="username"   :placeholder="inter.placeholderUser" />
			</div>
			<div class="inputView" style="margin-bottom: 0upx;">
				<image src="../../static/dl_srmm_icon.png" style="width: 48upx;height: 48upx;margin-left: 38upx;" mode=""></image>
				<input class="loginInput" type="password" style="height: 96upx;"  v-model="password"   :placeholder="inter.placeholderPwd" />
			</div>
			<div class="autoLoginDiv" @click="atuoLoginClick">
				<image :src="autoImg" style="width: 48upx;height: 48upx;" mode=""></image>
				<label style="font-size: 28upx; margin-left: 20upx;">{{inter.autologin}}</label>
			</div>
			<button class="loginButton" type="primary" @click="login">{{inter.login}}</button>
			<div class="bottom-div">
				<picker mode="selector"  :range="languageValue=='简体中文' ? languageList : languageListEn" range-key="lang" @change="changeLanguage">
					<div class="bottom-div-div">
						<image src="../../static/me_yy_icon.png" style="width: 40upx; height: 40upx; margin-right: 10upx;"></image>
						<label >{{languageValue}}</label>
					</div>
				</picker>
				<div style="width: 2upx; height: 40upx; background-color: #2F2F2F;"></div>
				<picker  mode="selector" :range="languageValue=='简体中文' ? internetList : internetListEn" range-key="lang" @change="changeInternater">
					<div class="bottom-div-div">
						<image src="../../static/me_nwwqh_icon.png" style="width: 40upx; height: 40upx; margin-left: 10upx; margin-right: 10upx;"></image>
						<label >{{internetName}}</label>
					</div>
				</picker>
			</div>
			
		</div>
		<view class="dialogView" v-if="updateShow" > 
			<div class="dialogDiv" >
				<div class="dialogDivTop">
					<text class="dialogDivTopText">
						{{inter.versionupdate}}
					</text>
				</div>
				<div class="dialogDivCenter">
					<div class="dialogDivCenterTop">
						<div class="dialogDivCenterTopDiv">
							<text style="color: #2F2F2F; font-size: 28upx;">{{inter.version + '：V' + version}}</text>
							<text style="color: #2F2F2F; font-size: 28upx; margin-left: 70upx;">{{inter.size +'：'+ size}}</text>
						</div>
						<div class="dialogDivCenterTopDiv" style="margin-top: 10upx;">
							<text style="color: #2F2F2F; font-size: 28upx;">{{inter.time + '：'+time}}</text>
						</div>
					</div>
					<div class="dialogDivCenterBottom">
						<div class="dialogDivCenterTopDiv" >
							<text style="color: #4A86C6; font-size: 28upx;">{{inter.newfunction+':'}}</text>
						</div>
						<div class="dialogDivCenterTopDiv" >
							<text style="color: #2F2F2F; font-size: 28upx;">{{upLog}}</text>
						</div>
					</div>
				</div>
				<div style="background-color: #979797; width: 610upx; height: 2upx;"/>
				<div class="dialogDivBottom">
					<div class="dialogDivBottomLeft" v-if="forceUpdateShow" @click="cancleFun">
						<text class="dialogDivBottomLeftText">{{inter.updatelater}}</text>
					</div>
					<div style="width: 2upx;height: 100%;background-color: #979797;" v-if="forceUpdateShow"/>
					<div class="dialogDivBottomLeft" @click="sureUpdateClick">
						<text class="dialogDivBottomRightText">{{inter.updatenow}}</text>
					</div>
				</div>
			</div>
		</view>
	</view>
	
</template>

<script>
	import $api from '@/api/api.js'
	import $inter from '@/api/international.js'
	var pinf = plus.push.getClientInfo();
	console.log(pinf.clientid)
	function bindc(){
		$api.bindCID({
			CID:pinf.clientid
		},res=>{
			  console.log("111"+JSON.stringify(res));
			  uni.switchTab({
			  	url:'../index/index'
			  })
			uni.hideToast()
		},err=>{
			uni.showToast({
				title:'data err',
				icon:'none',
				mask:true
			})
			console.log("222"+JSON.stringify(err));
		},e=>{
			
		})
	}
	var timeoutid = ''
	export default{
		data(){
			return {
				username:'',
				password:'',
				baseURL:'',
				updateBaseURL:'',
				languageList: [
					{
						lang:'简体中文',
					},
					{
						lang:'英文',
					}
				],
				languageListEn: [
					{
						lang:'Simplified Chinese',
					},
					{
						lang:'English',
					}
				],
				languageValue:'',
				internetList: [
					{
						lang:'外网',
						url:'http://dmsapp.smxwheel.com:8100/api/'   //三门峡正式库
						 // url:'http://dms.smxwheel.com:8101/api/' //三门峡测试库
						 //url:'http://112.25.209.232:8100/api/' //无锡正式库
					},
					{
						
						lang:'内网',
						url:'http://172.25.10.6:8100/api/',
						// url:'http://10.10.6.59:8100/api/' //无锡正式库
						// url : "http://172.29.253.140:8000/api/"  ,//摩洛哥地址
						// url : "http://192.168.1.106:8300/api/"  //本地地址
					}
				],
				internetListEn: [
					{
						lang:'Internet',
						url:'http://dmsapp.smxwheel.com:8100/api/',
						// url:'http://dms.smxwheel.com:8101/api/' //三门峡测试库
						 //url:'http://112.25.209.232:8100/api/' //无锡正式库
					},
					{
						
						lang:'Intranet',
						url:'http://172.25.10.6:8100/api/',
						// url:'http://dms.smxwheel.com:8101/api/' //三门峡测试库
						 //url:'http://10.10.6.59:8100/api/' //无锡正式库
						 // url : "http://172.29.253.140:8000/api/"  ,//摩洛哥地址
						 // url : "http://192.168.1.106:8300/api/"  //本地地址
					}
				],
				internetName:'',
				clientHight: '',
				footerHight: '',
				languageType:'',
				updateShow: false,
				forceUpdateShow:true,
				pkgUrl:'',
				version:'',
				time: '',
				upLog:'',
				size:'',
				langCode:'',
				autoImg:'../../static/DMS_djrw_zc_n_icon.png'
			}
		},
		onLoad(option) {
			if(option.loginout){
				console.log("44444"+option.loginout);
				clearTimeout(timeoutid)
				this.autoImg = '../../static/DMS_djrw_zc_n_icon.png'
				uni.setStorageSync('autoMark', 2)
			}
			// console.log(JSON.stringify($inter));
			if(uni.getStorageSync('username')){
				this.username = uni.getStorageSync('username')
			}
			if(uni.getStorageSync('password')){
				this.password = uni.getStorageSync('password')
			}
			// console.log("44444"+uni.getStorageSync('username'));
			// this.login()
			
			uni.getStorage({
				key:'internetName',
				success:(res)=>{
					this.internetName = res.data
					// console.log(this.internetName);
				}
			})
			uni.getStorage({
				key:'languageValue',
				success:(res)=>{
					this.languageValue = res.data
					if (this.languageValue == '简体中文') {
						this.langCode = '1'
					} else{
						this.langCode = '2'
					}
				}
			})
			if(uni.getStorageSync('autoMark')==1){
				console.log(9999999999)
				this.autoImg = '../../static/DMS_djrw_zc_s_icon.png'
				this.login()
			}
		},
		onShow: function () {
			uni.getStorage({
				key: 'baseURL',
				success: (res)=>{this.getUpdataApp(res.data)}
			});
		},
		methods:{
			cancleFun(){
				this.updateShow=false
			},
			sureUpdateClick(){
				this.updateShow = false 
				if(plus.os.name=="Android"){
					plus.runtime.openURL(this.updateBaseURL+this.pkgUrl);
				}else{
					plus.runtime.openURL(this.pkgUrl)
				}
			},
			getUpdataApp(baseURL){
				let len=baseURL.length;
				len=len-4;
				this.updateBaseURL = baseURL.substring(0,len)
				var PhoneType = plus.os.name
				$api.getUpdataApp({
						PhoneType: PhoneType,
						Version: '1.0.2'
					}, res=>{
						this.version = res.Verison
						this.pkgUrl = res.pkgUrl
						this.time = res.UpdTime
						this.upLog = res.UpdLog
						this.size = res.FileSize
						if(res.update== 1 && res.forceUpdate == 0){
							this.forceUpdateShow = true
							this.updateShow = true
						}
						if(res.update==1 && res.forceUpdate == 1){
							this.forceUpdateShow = false
							this.updateShow = true
						}
					}, err=>{
						
					},(e)=>{
								
					})
			},
			//登录方法
			login(){
// 				uni.switchTab({
// 					url:'../index/index'
// 				})		
				// 账号密码空值校验
				if(this.username==""){
					uni.showToast({
						title: this.inter.userTips,
						icon:"none",
						duration: 1000
					});
					return
				}else if(this.password==""){
					uni.showToast({
						title: this.inter.pswTips,
						icon:"none",
						duration: 1000
					});
					return
				}
				uni.showToast({
					title: this.inter.logon,
					icon:'loading',
					duration: 1000
				});
				// 登录接口
				$api.login({
						'UserCode':this.username,
						'Password':this.password,
						'DeviceType':1,
						'LangCode':this.langCode
					},(res)=> {
						if (res.success==true) {
							// 请求用户信息和权限
							this.getUserInfo()
							// 心跳函数 session延时
							this.heartBeat()
							
							uni.setStorage({
								key: 'Authorization_Token',
								data: res.msg
							})
							// 保存用户名密码
							uni.setStorage({
								key:'username',
								data:this.username
							})
							uni.setStorage({
								key:'password',
								data:this.password
							})
							bindc()
						} else{
							uni.showToast({
								title: res.msg,
								icon:"none",
								duration: 1000
							});
						}
						
					}, (err)=> {
						console.log(err);
					},(e)=>{
						
					}
				)
			},
			// 获取用户信息
			getUserInfo(){
				$api.getUserInfo((res)=> {
						console.log("3333"+JSON.stringify(res));
						uni.setStorageSync('userInfo',res)
					}, (err)=> {
						console.log(err);
					},(e)=>{
						
					})
			},
			// 改变语言
			changeLanguage(e){
				if (e.target.value == 0) {
					this.languageValue = this.languageList[e.target.value].lang
					if (this.internetName == 'Internet') {
						this.internetName = '外网'
					}
					if (this.internetName == 'Intranet') {
						this.internetName = '内网'
					}
					
					uni.setStorage({
						key:'internetName',
						data:this.internetName
					});
					uni.setStorage({
						key:'languageValue',
						data:'简体中文'
					})
				} else{
					this.languageValue = this.languageListEn[e.target.value].lang
					if (this.internetName == '外网') {
						this.internetName = 'Internet'
					}
					if (this.internetName == '内网') {
						this.internetName = 'Intranet'
					}
					uni.setStorage({
						key:'internetName',
						data:this.internetName
					});
					uni.setStorage({
						key:'languageValue',
						data:'English'
					})
				}
				if (plus.os.name=="Android") {
					uni.showModal({
						title: this.inter.tip,
						content: this.inter.tiplabel1,
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								plus.runtime.quit();
							}
						}
					});
				} else{
					var that = this
					uni.showModal({
						title: this.inter.tip,
						content: this.inter.tiplabel1,
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								that.restartapp()
							}
						}
					});
				}
				// console.log("1212121212==="+ JSON.stringify($inter));
			},
			restartapp(){
				var that = this
				uni.showModal({
					title: this.inter.tip,
					content: this.inter.tiplabel2,
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							that.restartapp()
						}
					}
				});
			},
			changeInternater(e){
				if (this.languageValue == '简体中文') {
					this.internetName = this.internetList[e.target.value].lang
				} else{
					this.internetName = this.internetListEn[e.target.value].lang
				}
				
				uni.setStorage({
					key:'baseURL',
					data:this.internetList[e.target.value].url
				})
				
				uni.setStorage({
					key: 'Authorization_Token',
					data: ''
				})
				uni.setStorage({
					key:'internetName',
					data:this.internetName
				});
				console.log("baseURL==="+this.internetList[e.target.value].url);
			},
			heartBeat(){
				$api.heartBeat(res=>{
					if (res.success==true) {
						timeoutid = setTimeout(this.heartBeat,900000);    //setTimeout是超时调用，使用递归模拟间歇调用
					}
				},err=>{
					console.log(JSON.stringify(err));
				},e=>{
					console.log(JSON.stringify(e));
				})
				
			},
			// 自动登录
			atuoLoginClick(){
				if(this.autoImg == '../../static/DMS_djrw_zc_n_icon.png'){
					this.autoImg = '../../static/DMS_djrw_zc_s_icon.png'
					uni.setStorageSync('autoMark', 1)
				}else{
					this.autoImg = '../../static/DMS_djrw_zc_n_icon.png'
					uni.setStorageSync('autoMark', 2)
				}
			}
			
		},
		
		computed: {
			inter(){
				return $inter.login
			}
		},
	}
</script>
	
<style scoped="css">
	body {
		height: 100%;
		margin: 0px;
		padding: 0px;
		overflow: hidden;
		-webkit-touch-callout: none;
		-webkit-user-select: none;

	}
	.bgp{
		position: absolute;
		top: 0;
		left: 0;
		width: 750upx;
		height: 100vh;
		z-index: -1;
		overflow: hidden;
	}
	.loginpic{
		/* background-image: url('../../static/login.png'); */
		background-size: 100% 100%; 
		height: 100vh;
	}
	.login{
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: -webkit-linear-gradient(180deg,rgba(225,236,255,1) 0%,rgba(255,255,255,1) 19%,rgba(255,255,255,1) 44%,rgba(255,255,255,1) 68%,rgba(221,234,255,1) 100%); /* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(180deg,rgba(225,236,255,1) 0%,rgba(255,255,255,1) 19%,rgba(255,255,255,1) 44%,rgba(255,255,255,1) 68%,rgba(221,234,255,1) 100%); /* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(180deg,rgba(225,236,255,1) 0%,rgba(255,255,255,1) 19%,rgba(255,255,255,1) 44%,rgba(255,255,255,1) 68%,rgba(221,234,255,1) 100%); /* Firefox 3.6 - 15 */
		background: linear-gradient(180deg,rgba(225,236,255,1) 0%,rgba(255,255,255,1) 19%,rgba(255,255,255,1) 44%,rgba(255,255,255,1) 68%,rgba(221,234,255,1) 100%);
	}
	.loginButton{
		background: -webkit-linear-gradient(left, #107FD2 , #06C9ED); /* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #107FD2, #06C9ED); /* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #107FD2, #06C9ED); /* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #107FD2 , #06C9ED); /* 标准的语法 */
		width: 596upx;
		height: 96upx;
		margin-top: 48upx;
		color: #ffffff;
		font-size: 32upx;
		text-align: center;
		line-height: 96upx;
	}
	.loginInput{
		
	}
	.autoLoginDiv{
		width: 596upx;
		height: 80upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}
	.inputView{
		/* margin: 0 80upx 60upx 80upx ; */
		margin-bottom: 40upx;
		width: 596upx;
		height: 96upx;
		border: 1px solid #606060;
		border-radius:4px;
		line-height:96upx;
		display: flex;
		flex-direction: row;
		align-items: center;

	}
	.inputView input{
		/* border: 1px solid #123456; */
		font-size: 28upx;
		margin-left: 36upx;
	}
	.loginImage{
		display: flex;
		justify-content: center;
		margin-top: 180upx;
		margin-bottom: 90upx;
		
		
	}
	.loginImage image{
		width: 174upx;
		height: 154upx;
	
	}
	.bottom-div{
		margin-top: 60upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.bottom-div-div{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 200upx;
		height: 52upx;
	}
	.bottom-div-div label{
		
		width:150upx;
		height:26upx;
		font-size:28upx;
		font-weight:400;
		color:#5D5D5D;
		line-height:26upx;
	}
	.dialogView{
		display: flex;
		justify-content: center;
		align-items: center;
		background-color:rgba(0,0,0,0.7);
		position: absolute;
		top: 0;
		left: 0;
		z-index:100;
		width: 100vw; 
		height: 100vh;
	}
	.dialogDiv{
		width: 610upx;
		height: 530upx;
		background-color: #F5F8FF;
		border-radius: 8upx;
		display: flex;
		flex-direction: column;
	}
	.dialogDivTop{
		width: 610upx;
		height: 100upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background: -webkit-linear-gradient(left, #107FD2 , #06C9ED); /* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #107FD2, #06C9ED); /* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #107FD2, #06C9ED); /* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #107FD2 , #06C9ED); /* 标准的语法 */
		border-top-right-radius: 8upx;
		border-top-left-radius: 8upx;
	}
	.dialogDivTopText{
		margin-left: 42upx;
		font-size: 28upx;
		color: #FFFFFF;
	}
	.dialogDivCenter{
		width: 610upx;
		height: 100%;
	}
	.dialogDivBottom{
		width: 610upx;
		height: 120upx;
		display: flex;
		flex-direction: row;

	}
	.dialogDivBottomLeft{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.dialogDivBottomLeftText{
		color: #9B9B9B;
		font-size: 28upx;
	}
	.dialogDivBottomRightText{
		color: #4A86C6;
		font-size: 28upx;
	}
	.dialogDivCenterTop{
		width: 536upx;
		height: 140upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		
	}
	.dialogDivCenterTopDiv{
		margin-left: 42upx;
	}
	.dialogDivCenterBottom{
		width: 536upx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}
</style>